<template>
  <div class="employees">
    <!--  顶部-->
    <page-tools>
      <template #left>
        <span>共166条记录</span>
      </template>
      <template #right>
        <el-button size="mini" type="warning">导入</el-button>
        <el-button size="mini" type="primary" @click="addStaffClick">+ 新增员工</el-button>
      </template>
    </page-tools>
    <!--  放置表格和分页-->
    <el-card style="margin-top: 20px">
      <el-table border :data="tableData" class="table" v-loading="loading">
        <el-table-column type="index" align="center" label="序号" width="80px"></el-table-column>
        <el-table-column prop="username" align="center" label="姓名"></el-table-column>
        <el-table-column prop="mobile" align="center" label="手机号"></el-table-column>
        <el-table-column prop="workNumber" align="center" label="工号"></el-table-column>
        <el-table-column align="center" label="聘用形势" width="100px">
          <template #default="{row}">
            <span>{{ row.formOfEmployment | filterformOfEmployment }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" align="center" label="部门"></el-table-column>
        <el-table-column prop="formOfEmployment" align="center" label="状态"></el-table-column>
        <el-table-column  align="center" label="入职时间">
          <template #default="{row}">
            <span>{{ row.timeOfEntry | filterDate }}</span>
          </template>
        </el-table-column>
        <el-table-column  align="center" label="转正时间">
          <template #default="{row}">
            <span>{{ row.correctionTime | filterDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" align="center" label="操作" width="280px">
          <template>
            <el-button type="text" size="mini">查看</el-button>
            <el-button type="text" size="mini">转正</el-button>
            <el-button type="text" size="mini">调岗</el-button>
            <el-button type="text" size="mini">离职</el-button>
            <el-button type="text" size="mini">角色</el-button>
            <el-button type="text" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <el-pagination style="text-align: right;margin-top: 40px;margin-right: 20px"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="pageSizes"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
    <!--  新增修改面板-->
    <add :is-show-dialog.sync="isShowDialog" @updateUserList="getUserList"/>
  </div>
</template>

<script>
import {getUserListApi} from "@/api/employees";
import Add from "@/views/employees/components/add";

export default {
  name: "employees",
  components: {Add},
  data() {
    return {
      //是否加载中
      loading: false,
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
      currentPage: 1,  //  当前页码
      pageSizes: [5, 10, 15, 20],  //页容量选项
      pageSize: 5,   //选中的页容量
      total: 0,  //数据总条数
      isShowDialog: false  //控制新增修改面板的显示与隐藏
    }
  },
  methods: {
    handleSizeChange(val) {
      //选中页容量改变
      this.pageSize = val
      this.getUserList()
    },
    handleCurrentChange(val) {
      //当前页面改变
      this.currentPage = val
      this.getUserList()
    },
    //   获取所有的员工列表
    getUserList() {
      this.loading = true
      setTimeout(async () => {
        const res = await getUserListApi({
          page: this.currentPage,
          size: this.pageSize
        })
        // console.log(res)
        this.total = res.total
        this.tableData = res.rows
        this.loading = false
      }, 200)
    },
    //  新增员工按钮
    addStaffClick() {
      this.isShowDialog = true
    }
  },
  created() {
    this.getUserList()
  }
}
</script>

<style scoped lang="scss">
.employees {
  padding: 20px;

  .table {
    ::v-deep th {
      background-color: #fafafa;
      border-bottom: 2px solid #e8e8e8;
      text-align: center;
    }
  }
}
</style>
